import { createForm } from "@formily/core";
import { FormProvider, FormConsumer, Field, VoidField } from "@formily/react";
import { Input, Button, Space } from "antd";

const form = createForm();

export default () => (
  <FormProvider form={form}>
    <Space>
      <VoidField name="layout">
        <Field name="input" component={[Input]} />
      </VoidField>
      <FormConsumer>
        {() => (
          <Space>
            <Button
              onClick={() => {
                // if (form !== undefined) {
                //   form
                //     .query("layout")
                //     .take()
                //     .setState((state) => {
                //       state.visible = !state.visible;
                //     });
                // }
              }}
            >
              {form.query("layout").get("visible") ? "Hide" : "Show"}
            </Button>
            <div>{JSON.stringify(form.values, null, 2)}</div>
          </Space>
        )}
      </FormConsumer>
    </Space>
  </FormProvider>
);
